<template>
    <div>
        <!-- 头部 -->
        <header>
            <!-- 类解释：navbar【导航栏】，navbar-expand-lg【在lg屏幕(992px)上水平排列，在这个屏幕(992px)下垂直堆叠】 -->
            <!-- 类解释：bg-dark【背景黑色】，navbar-dark【字体白色】，fixed-top【固定在顶部】，导航栏默认占整个屏幕宽度 -->
            <!-- nav自带flex弹性布局 -->
            <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
                <!-- 类解释：container【内容两遍留白】 -->
                <div class="container">
                    <!-- 内容：Logo和文本。navbar-nav【导航栏中的导航】 -->
                    <div class="navbar-nav">
                        <!-- 类解释：nav-link【导航中的链接】，navbar-brand【导航栏品牌-用于高亮显示品牌，可以用于做Logo】 -->
                        <a href="#" class="nav-link navbar-brand">
                            <!-- 类解释：rounded-circle【将图像塑造为圆形】 -->
                            <img src="../../assets/images/w.png" height="40px" />
                        </a>
                    </div>

                    <!-- 折叠导航栏按钮：navbar-toggler【导航栏切换】，data-bs-toggle【数据切换方式collapse折叠】，将id="demo"的div折叠 -->
                    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#demo">
                        <!-- 类解释：navbar-toggler-icon【导航栏切换图标】 -->
                        <span class="navbar-toggler-icon"></span>
                    </button>


                    <!-- 内容：导航和关键字搜索 -->
                    <!-- 类解释：collapse【折叠】，navbar-collapse【导航栏折叠】，justify-content-between【主轴内容排列-两端对齐】 -->
                    <div id="demo" class="collapse navbar-collapse justify-content-between">
                        <!-- 导航 -->
                        <ul class="navbar-nav">
                            <!-- 类解释：mx-2【左右外边距0.5rem=7px】 -->
                            <li class="nav-item mx-2">
                                <a href="index.html" class="nav-link"><i class="bi bi-house-door-fill"></i> 首页</a>
                            </li>
                            <li class="nav-item mx-2">
                                <a href="blog-archives.html" class="nav-link"><i class="bi bi-clock-fill"></i> 归档</a>
                            </li>
                            <!-- 类解释：dropdown【定义下拉菜单】 -->
                            <li class="nav-item mx-2 dropdown">
                                <!-- 类解释：dropdown-toggle【点击a标签，进行下拉切换】，data-bs-toggle【数据切换方式dropdown下拉式的】 -->
                                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                                    <i class="bi bi-brush-fill"></i> 文章分类
                                </a>
                                <!-- 类解释：dropdown-menu【下拉菜单】 -->
                                <ul class="dropdown-menu" style="margin-top: 13px">
                                    <li class="dropdown-item" v-for="(type,index) in articleTypeStatistics" :key="index">
                                        <a :href="'blog-classify.html?'+type.id">
                                            {{type.typeName}}
                                            ({{type.count}})
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item mx-2">
                                <a href="blog-aboutus.html" class="nav-link"><i class="bi bi-person-hearts"></i> 关于我</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
    </div>
</template>

<script>
module.exports = {
    data() {
       return{
        //文章分类统计数组
        articleTypeStatistics:[],
       }
    },
    methods: {
        getArticleTypeStatistics(){
            this.$http.get("/articleType/articleTypeStatistics").then(res=>{
                //console.log("文章分类统计数组: ",res);
                //给分类统计数组赋值
                this.articleTypeStatistics=res.data.data;
            }).catch(()=>{
                this.$message.error("网络异常，请稍后重试！【400/404/...】");
            })
        }
    },
    mounted() {
       //调用分类统计函数
       this.getArticleTypeStatistics();
    }
}
</script>

<style>
html {
    /* bootstrap中默认1rem=16px，即html的fs为16px，可以通过以下方式修改 */
    font-size: 14px;
}

#demo li:hover {
    background: #99ccff;
}
</style>